<template>
	<view class="coupons_component" :style="{'width': width}">
		<view class="coupon_hd">
			<view class="tag">省钱券包</view>
			<text class="rules" @click="seeRules">活动规则</text>
		</view>
		<view class="coupon_body">
			<view class="title">
				<text class="name">{{ couponList.title }}</text>
				<view class="rightarea">
					<text>￥{{ couponList.price }}</text>
					<switch :checked="checked" color="#a9d54f" @change="switchChange" style="transform:scale(0.7)" />
				</view>
			</view>
			<scroll-view :scroll-x="true" class="coupon_list">
				<view class="coupon_item" v-for="(item,index) in couponList.couponData" :key="index">
					<view class="item">
						<view class="leftbox">
							<view class="money">{{ item.coupon_price }}元</view>
							<view class="des">{{ item.title }}</view>
						</view>
						<view class="rightbox">
							<view class="">{{ item.number }}张-{{ item.coupon_title }}</view>
							<view class="des">
								<!-- <text>立即生效</text>
								<text>|</text> -->
								<text>有效期 {{ item.coupon_time == 0 ? item.start_use_time + '~' +item.end_use_time : '立即生效 | '+item.coupon_time + '天'}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<wyb-popup ref="popup" type="center" radius="6" :showCloseIcon="true" width="600" height="700">
			<view class="">
				<view class="flex flex-aj-center padding30" style="font-size: 30rpx;">活动规则</view>
				<scroll-view scroll-y style="width: 100%; height: 600rpx; box-sizing: border-box; padding: 0 30rpx 30rpx;">
					{{ couponList.rule_info }}
				</scroll-view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	export default {
		name:"coupons",
		components: {
			wybPopup,
		},
		props: {
			width: {
				type: String,
				default: '100%',
			},
			couponList: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				checked: false
			};
		},
		methods: {
			switchChange() {
				this.checked = !this.checked
				this.$emit('switchChange', this.checked)
			},
			seeRules() {
				this.$refs.popup.show()
			}
		}
	}
</script>

<style lang="scss">
.coupons_component {
	background-color: #fff;
	border-radius: 15rpx;
	border: 1px solid #a9d54f;
	overflow: hidden;
	.coupon_hd{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.tag {
			width: 185rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background-image: linear-gradient(to right, #9ecc40, #b4de5d);
			color: #fff;
			border-radius: 5rpx 0 15rpx 0;
			font-size: 30rpx;
		}
		.rules {
			width: 150rpx;
			color: #999;
		}
	}
	.coupon_body {
		width: 100%;
		padding: 15rpx 5rpx 30rpx 30rpx;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15rpx;
			.name {
				font-size: 32rpx;
			}
			.rightarea {
				display: flex;
				align-items: center;
			}
		}
		.coupon_list {
			display: flex;
			width: 100%;
			white-space: nowrap;
		}
		.coupon_item {
			display: inline-block;
			height: 140rpx;
			background-color: #fce4c0;
			border-radius: 15rpx;
			margin-right: 30rpx;
			padding: 30rpx 30rpx 0;
			.item {
				display: flex;
				align-items: center;
				color: #bd7507;
				.leftbox, .rightbox {
					.des {
						font-size: 20rpx;
						margin-top: 8rpx;
					}
				}
				.leftbox {
					border-right: 1px solid #c9cac5;
					padding-right: 30rpx;
					margin-right: 30rpx;
					.money {
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}
		}
	}
}
</style>
